<template>
	<!-- 选择弹窗组件示例 -->
	<view class="check">
		<view class="bottom_title">选择框</view>
		<c-check :show="show1" :dataList="checkList" closeable field="value" @determine="determineFn" @close="closeFn"></c-check>
		<view>这是选中的数据:{{checkData.value||'无'}}</view>
		<button @click="show1=true">点击打开</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show1: false,
				checkList: [],
				checkData:{}
			}
		},
		created() {
			this.initData(20)
		},
		methods: {
			// 定义数据 x=多少条数据
			initData(x) {
				for (let i = 1; i <= x; i++) {
					let obj = {
						id: i,
						label: '选项' + i,
						value: '这是选项' + i + '的值'
					}
					this.checkList.push(obj)
				}
			},
			// 关闭弹窗
			closeFn(){
				this.show1 = false
			},
			// 确定选择
			determineFn(val){
				console.log('val',val);
				this.checkData = val
				this.show1 = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.check{
		padding: 30rpx;
	}
</style>